<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <button>添加标签</button>
    <script>
        document.querySelector('button').onclick = function(){
            // 1、创建a标签的元素节点  createElement 可以创建元素节点参数指定标签名称
            var aDom = document.createElement('a');
            // 2、创建属性节点
            var hrefAttr = document.createAttribute('href');
            // 3、设置属性节点的内容
            hrefAttr.nodeValue = 'https://www.baidu.com';
            // 4、设置属性节点修饰a标签 setAttributeNode设置属性节点的方法参数传递属性节点对象
            aDom.setAttributeNode(hrefAttr);
            // 5、创建文本节点
            var textNode = document.createTextNode('百度一下')
            // 6、设置文本节点为a标签元素节点的子节点
            aDom.appendChild(textNode)
            // 7、将a标签挂到页面上
            document.querySelector('#app').appendChild(aDom)
         

            // document.querySelector('#app').innerHTML = '<a href="https://www.baidu.com">百度一下</a>'
        }
    </script>
</body>
</html>